window.onload = function () {
    let leftItem = document.querySelectorAll('.left-item');
    let fenleis = document.querySelectorAll('.fenlei');
    let fenleiConet = document.querySelectorAll('.fenlei-conet');
    // 轮播图js获取节点
    let munes = document.querySelector('.mune-lunbo');
    let lunbos = document.querySelector('.lunbo-item');
    let imgs = document.querySelectorAll('.lunbo-item img');
    let lefts = document.querySelector('.arrow-left');
    let rights = document.querySelector('.arrow-right');
    let fanyes = document.querySelectorAll('.fanyes');

    // 主体内容盒子1
    let mainXia1 = document.querySelector('.main1-xia1');



    // 定义一个变量;当前第几张图片  默认为0
    let index = 0;
    // 定义一个变量来装最大索引值
    let man = imgs.length - 1;

    for (let i = 0; i < leftItem.length; i++) {
        // 鼠标移入事件
        leftItem[i].addEventListener('mouseover', function () {

            fenleiConet[i].style.display = 'block';

        })

        // 鼠标移出事件
        leftItem[i].addEventListener('mouseout', function () {

            fenleiConet[i].style.display = 'none';

        })

    }




    // 轮播图js
    // 向右翻页事件监听
    rights.addEventListener('click', function () {

        // 下一张事件监听
        index++;

        // 边界处理
        if (index > man) {
            index = 0;

        }

        // 第一张图片的索引值计算出
        let left = -1000 * index;

        lunbos.style.left = left + 'px';

        render();

    })



    // 向左翻页事件监听
    lefts.addEventListener('click', function () {

        // 下一张事件监听
        index--;

        // 边界处理
        if (index < 0) {
            index = man;

        }

        // 第一张图片的索引值计算出
        let left = -1000 * index;

        lunbos.style.left = left + 'px';

        render();

    })

    // 自动播放    定时器
    // 进入页面开始播放，每间隔1秒 自动切下一张
    let a = setInterval(function () {
        index++;

        // 边界处理
        if (index > man) {
            index = 0;
        }

        let left = -1000 * index;

        lunbos.style.left = left + 'px';

        render();
    }, 1000)

    // 鼠标移入，轮播停止
    munes.addEventListener('mouseover', function () {


        clearInterval(a)


    })
    // 鼠标移除
    munes.addEventListener('mouseout', function () {

        a = setInterval(function () {
            index++;

            // 边界处理
            if (index > man) {
                index = 0;
            }

            let left = -1000 * index;

            lunbos.style.left = left + 'px';

            render();
        }, 1000)



    })

    function render() {
        for (let i = 0; i < fanyes.length; i++) {
            // 将index对应数字按钮 删除active
            fanyes[i].classList.remove('active');


        }

        // 将index对应数字按钮 加上active
        fanyes[index].classList.add('active');
        // 根据最新的当前图片索引  计算出 left的值
        let left = -1000 * index;
        // 根据计算出来的list盒子的left 值更改list样式
        lunbos.style.left = left + 'px';
    }

    // 点击数字按钮切换
    for (let i = 0; i < fanyes.length; i++) {
        
        fanyes[i].addEventListener('click', function () {
            index = i;
         
            render();
        })


    }


    // 主体第一个内容盒子

    let html = '';
    for (i = 0; i <= 6; i++) {
        mainXia1.innerHTML = html;
        html += `
        
        
                <div class="xia1">
                    <img src="../images/鼠标.jpg" alt="" class="img11">
                    <img src="../images/限时抢.jpg" alt="" class="img22">
                    <div class="zi1">黑爵青蜂侠六键电竞游戏鼠标</div>
                    <div class="zi2">全国联保 一年免费包换</div>
                    <div class="zi3">￥:299</div>
                </div>
        
        
        
        `

    }
    // 主体里面第二个小盒子
    let mainXia2 = document.querySelector('.main1-xia2');
    let su = '';
    for (i = 0; i <= 6; i++) {
        mainXia2.innerHTML = su;
        su += `
    <div class="xia2">
        <img src="../images/烧水壶.jpg" alt="" class="img33">
        <img src="../images/限时抢.jpg" alt="" class="img44">
        <div class="zi1">小熊家用静音加湿器</div>
        <div class="zi2">唯美外观 微米级喷雾</div>
        <div class="zi3">￥:89</div>
    </div> 
        
        
        
        
        `






    }





















}